import Vue from 'vue'
import VueRouter from 'vue-router'
import One from './One'
import Two from './Two'
import Three from './Three'
import Erro from './Erro'
import Child from './Child'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'One',
        component: One
    },
    {
        path: '/two',
        name: 'Two',
        component: Two,
        alias:"/kiss",//别名
        children:[
            {
                path:'',
                component: Child
            }
        ]
    },
    // {
    //     path: '/three/:name/:age',
    //     name: 'Three',
    //     component: Three,
    //     beforeEnter: (to, from, next) => {
    //         console.log(to)
    //         console.log(from)
    //         console.log('路由独享守卫')
    //         next()
    //     }
    // },
    // {
    //     path: '/three/:name/:age',
    //     name: 'Three',
    //     component: Three,
    //     redirect:"/two"//重定向
    // },
    {
        path: '/three/:id/:age',
        name: 'Three',
        component: Three,
    },
    {
        path: '*',//404路由
        name: 'Erro',
        component: Erro
    },
]

const router = new VueRouter({
    routes
})

// router.beforeEach((to,from,next)=>{ //路由前置守卫
//     console.log(to)//进入目标路由
//     console.log(from)//离开的目标路由
//     console.log('路由前置守卫')
//     next()//管道钩子
// })

// router.beforeResolve((to,from,next)=>{ //全局解析守卫
//     console.log(to)//进入目标路由
//     console.log(from)//离开的目标路由
//     console.log('全局解析守卫')
//     next()//管道钩子
// })

// router.afterEach((to,from,next)=>{ //全局后置钩子
//     // console.log(to)//进入目标路由
//     // console.log(from)//离开的目标路由
//     // console.log('全局后置钩子')
//     // next()//管道钩子
// })

export default router